<template>
	<view class="login-page">
		<view class="login-header">
			<image class="login-logo" src="/static/image/1751422720515.png" mode="aspectFit"></image>
			<view class="login-title">欢迎登录颐养健康中心</view>
			<view class="login-tip">请使用您的账号和密码登录系统</view>
		</view>
		<view class="login-form">
			<input class="login-input" v-model="username" placeholder="请输入账号" />
			<input class="login-input" v-model="password" type="password" placeholder="请输入密码" />
			<button class="login-btn" @click="handleLogin">登录</button>
		</view>
	</view>
</template>

<script>
	import {
		login,
		setToken
	} from '@/api/user.js'

	export default {
		data() {
			return {
				username: '',
				password: ''
			}
		},
		methods: {
			async handleLogin() {
				if (!this.username || !this.password) {
					uni.showToast({
						title: '请输入账号和密码',
						icon: 'none'
					});
					return;
				}
				try {
					// 调用后端接口
					const res = await login({
						username: this.username,
						password: this.password,
						role: 3
					});
					// 假设后端返回 { code: 1000, data: userId, msg: '1' }
					let userId = res;
					// 兼容后端返回格式
					if (res && typeof res === 'object' && 'data' in res) {
						userId = res.data;
					}
					uni.setStorageSync('isLogin', true);
					uni.setStorageSync('userId', userId); // 可存储用户id
					// 记录token
					await setToken(userId);

					uni.showToast({
						title: '登录成功',
						icon: 'success'
					});
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/home/home'
						});
					}, 500);
				} catch (err) {
					// 假设后端返回 { code: 非1000, message: '账号或密码错误！' }
					uni.showToast({
						title: err.message || '登录失败',
						icon: 'none'
					});
				}
			}
		}
	}
</script>

<style scoped>
	.login-page {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: #f5f5f5;
	}

	.login-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 30px;
	}

	.login-logo {
		width: 80px;
		height: 80px;
		margin-bottom: 16px;
		border-radius: 16px;
		background: #fff;
		box-shadow: 0 2px 8px rgba(91, 184, 172, 0.10);
	}

	.login-title {
		font-size: 22px;
		font-weight: bold;
		color: #F6A031;
		margin-bottom: 8px;
	}

	.login-tip {
		font-size: 15px;
		color: #888;
		margin-bottom: 10px;
	}

	.login-form {
		width: 80%;
		max-width: 350px;
		background: #fff;
		border-radius: 12px;
		box-shadow: 0 2px 10px rgba(91, 184, 172, 0.08);
		padding: 30px 20px 24px 20px;
		display: flex;
		flex-direction: column;
	}

	.login-input {
		height: 44px;
		border: 1px solid #e0e0e0;
		border-radius: 8px;
		margin-bottom: 18px;
		padding: 0 12px;
		font-size: 16px;
		background: #fafafa;
	}

	.login-btn {
		background: #F6A031;
		color: #fff;
		font-size: 18px;
		border: none;
		border-radius: 8px;
		width: 120px;
		height: 44px;
		margin-top: 10px;
	}
</style>